import React from 'react';
import { connect } from 'umi';
import { Image, Row, Col, Divider, Tabs, Alert, Empty, Tag } from 'antd';
import UploadUtil from '@/components/UploadUtil';
import collectOut from '@/assets/collectOut.png';
import collectFill from '@/assets/collectFill.png';
import show from '@/assets/show.png';
import { LikeOutlined, LikeFilled, EyeOutlined, MessageOutlined } from '@ant-design/icons';

import CommentList from './CommentList';
const { TabPane } = Tabs;
class PreviewVideo extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      contentData: {},
    };
  }
  componentDidMount() {
    const { previewParams } = this.props;
    console.log(this.props);

    if (previewParams && previewParams.id) {
      this.getData(previewParams.id);
    }
  }
  getData = (id: number) => {
    const { dispatch } = this.props;
    this.setState({ loading: true });
    if (id) {
      dispatch({
        type: 'Abp/get',
        payload: { id: id },
        control: 'Edu_Course',
      }).then(() => {
        var resp = this.props.response.result;
        this.setState({ contentData: resp });
        console.log(resp);
      });
    }
  };
  videoRender = () => {
    const { contentData } = this.state;
    const { previewParams } = this.props;
    console.log(previewParams);

    const tags = previewParams.tags ? previewParams.tags.split(',') : [];
    return (
      <div style={{ width: 400 }}>
        <Row>
          <Col>
            <iframe
              src={previewParams.videoUrl}
              frameBorder="0"
              scrolling="no"
              width="400"
              height="200"
              allowFullScreen
            ></iframe>
          </Col>
        </Row>
        <Row>
          <Col span={16} offset={1}>
            <span style={{ fontSize: 18, fontWeight: 500 }}>{previewParams.title}</span>
          </Col>
          <Col span={7}>
            <span>
              {previewParams.likeNum === 0 ? (
                <LikeOutlined style={{ width: 14, height: 14 }} />
              ) : (
                <LikeFilled style={{ width: 14, height: 14 }} />
              )}
            </span>
            <span style={{ paddingLeft: 4 }}>{previewParams.likeNum}</span>
            <span style={{ marginLeft: 10 }}>
              {previewParams.collectNum === 0 ? (
                <img style={{ width: 14, height: 14 }} src={collectOut} />
              ) : (
                <img style={{ width: 14, height: 14 }} src={collectFill} />
              )}
            </span>
            <span style={{ paddingLeft: 4 }}>{previewParams.collectNum}</span>
            <span style={{ marginLeft: 10 }}>
              <img style={{ width: 14, height: 14 }} src={show} />
            </span>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Alert
              style={{ marginTop: 10 }}
              banner
              message={
                <div style={{ width: '100%', fontSize: 12 }}>
                  该课程内容仅供参考，若有任何问题请及时就医问诊
                </div>
              }
            />
          </Col>
        </Row>
        <Divider />
        <Row>
          <Col span={24}>
            <Tabs defaultActiveKey="1" tabBarGutter={60}>
              <TabPane tab={'课程信息'} key="1" style={{ width: '100%', height: 200 }}>
                <div>
                  <p style={{ fontSize: 16, fontWeight: 600 }}>标签</p>
                  <p style={{ fontSize: 14 }}>
                    <span>
                      {tags.map((item: any) => {
                        return (
                          <Tag color="orange" style={{ fontSize: 3 }}>
                            {item}
                          </Tag>
                        );
                      })}
                    </span>
                  </p>
                </div>
                <div>
                  <p style={{ fontSize: 16, fontWeight: 600 }}>课程简介</p>
                  <p style={{ fontSize: 14 }}>{previewParams.summary}</p>
                </div>
                <div>
                  <p style={{ fontSize: 16, fontWeight: 600 }}>课程内容</p>
                  <div dangerouslySetInnerHTML={{ __html: contentData.contents }}></div>
                </div>
              </TabPane>
              <TabPane tab={'课程评论'} key="2" style={{ width: '100%', overflow: 'visible' }}>
                <CommentList record={previewParams.id} />
              </TabPane>
            </Tabs>
          </Col>
        </Row>
      </div>
    );
  };
  imageRender = () => {
    const { contentData } = this.state;
    const { previewParams } = this.props;
    console.log(previewParams);

    const tags = previewParams.tags ? previewParams.tags.split(',') : [];
    console.log(tags);

    return (
      <div style={{ width: 400 }}>
        <Row>
          <Col span={12} offset={1} style={{ lineHeight: 1 }}>
            <span style={{ fontSize: 20, fontWeight: 500 }}>{previewParams.title}</span>
          </Col>
          <Col span={11}>
            <div>
              <span>
                {previewParams.cType === 'common' ? (
                  <Tag color="purple">文章</Tag>
                ) : (
                  <Tag color="purple">视频</Tag>
                )}
              </span>
              <span>
                {tags.map((item: any) => {
                  return <Tag color="orange">{item}</Tag>;
                })}
              </span>
            </div>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <div
              dangerouslySetInnerHTML={{ __html: contentData.contents }}
              style={{ marginTop: 30 }}
            ></div>
          </Col>
          <Col span={24}>
            {previewParams.imageUrl ? (
              <Image
                src={UploadUtil.imgServ + previewParams.imageUrl}
                style={{ width: 400, height: 260 }}
              />
            ) : (
              <Empty style={{ width: 400, height: 260 }} description={'暂无图片'} />
            )}
          </Col>
          <Col span={24}>
            <span style={{ fontSize: 14, fontWeight: 500 }}>简介：</span>
            <span>{previewParams.summary}</span>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Alert
              style={{ marginTop: 10 }}
              banner
              message={
                <div style={{ width: '100%', fontSize: 12 }}>
                  该课程内容仅供参考，若有任何问题请及时就医问诊
                </div>
              }
            />
          </Col>
          <Col span={8} offset={6} style={{ marginTop: 10 }}>
            <span style={{ paddingLeft: 4 }}>
              {previewParams.likeNum === 0 ? (
                <LikeOutlined style={{ width: 14, height: 14 }} />
              ) : (
                <LikeFilled style={{ width: 14, height: 14 }} />
              )}
            </span>
            <span style={{ paddingLeft: 4 }}>{previewParams.likeNum}</span>
            <span style={{ marginLeft: 10 }}>
              {previewParams.collectNum === 0 ? (
                <img style={{ width: 14, height: 14 }} src={collectOut} />
              ) : (
                <img style={{ width: 14, height: 14 }} src={collectFill} />
              )}
            </span>
            <span style={{ paddingLeft: 4 }}>{previewParams.collectNum}</span>
          </Col>
          <Col span={4} offset={6} style={{ marginTop: 10 }}>
            <span>
              <EyeOutlined />
            </span>
            <span style={{ marginLeft: 10 }}>
              <img style={{ width: 14, height: 14 }} src={show} />
            </span>
          </Col>
        </Row>
        <Divider />

        <Row>
          <Col span={24}>
            <Tabs defaultActiveKey="1">
              <TabPane
                tab={
                  <span>
                    <MessageOutlined />
                    热门评论
                  </span>
                }
                key="1"
              >
                <CommentList record={previewParams.id} />
              </TabPane>
            </Tabs>
          </Col>
        </Row>
      </div>
    );
  };
  render() {
    const { previewParams } = this.props;
    const { cType } = previewParams;
    const VideoRender = this.videoRender;
    const ImageRender = this.imageRender;
    return <>{cType == 'video' ? <VideoRender /> : <ImageRender />}</>;
  }
}
export default connect(({ Abp }: API.IConnectState) => ({
  response: Abp.response,
}))(PreviewVideo);
